<!--
 * Copyright © 2022 XXXXXXXXX
 * @Author: zhangxiang
 * @Date: 2022-09-13 10:57:59
 * @LastEditors: zhangxiang
 * @LastEditTime: 2023-09-06 14:58:43
 * @Description:
 *
-->

<template>
  <div class="event-overview-container">
    <el-row type="flex" align="middle">
      <!-- 服务商&集群 选择 -->
      <CloudCluster
        :cloud-cluster-obj.sync="cloudClusterObj"
        :cloud-vendor-title="'集群'"
        :k8s-cluster-name-title="''"
      />
      <el-button
        size="medium"
        type="primary"
        :loading="queryLoading"
        @click="queryClick"
      >查询</el-button>
      <el-button size="medium" @click="resetClick">重置</el-button>
      <!-- 时间筛选 -->
      <el-radio-group
        v-model="timeType"
        style="margin-left: auto"
        size="small"
        @change="timeTypeChange"
      >
        <el-radio-button label="24hour">近24小时</el-radio-button>
        <el-radio-button label="7day">近一周</el-radio-button>
      </el-radio-group>
    </el-row>
    <div class="overview-content">
      <div type="flex" align="middle" class="middle">
        <div class="left common-bg">
          <div class="subtitle">事件数量 TOP10</div>
          <EventTop10 class="item" :top10="top10" />
        </div>
        <div class="right">
          <div class="right-top">
            <div class="half common-bg">
              <div class="subtitle">事件总数</div>
              <EventTotal class="item" :total="totalInfo" />
            </div>
            <div class="half common-bg">
              <div class="subtitle">Warnning事件环比</div>
              <EventSequential
                class="item"
                :time-type="timeType"
                :sequential="sequential"
              />
            </div>
          </div>
          <div class="right-bottom common-bg">
            <div class="subtitle">Normal事件趋势</div>
            <EventTrendNormal class="item" :trend="eventTrend" />
          </div>
        </div>
      </div>
      <div class="bottom common-bg">
        <div class="subtitle">Warning事件趋势</div>
        <EventTrendWarning class="item" :trend="eventTrend" />
      </div>
    </div>
  </div>
</template>

<script>
import CloudCluster from '@/components/CloudCluster'
import { getK8sEvent } from '@/api/cnap/statis-analysis'
import { isEmptyString } from '@/utils/index'
import EventTrendWarning from './EventTrendWarning.vue'
import EventTrendNormal from './EventTrendNormal.vue'
import EventTop10 from './EventTop10.vue'
import EventTotal from './EventTotal.vue'
import EventSequential from './EventSequential.vue'

export default {
  name: 'EventOverview',
  components: {
    CloudCluster,
    EventTrendWarning,
    EventTrendNormal,
    EventTop10,
    EventTotal,
    EventSequential
  },
  data() {
    return {
      cloudClusterObj: {
        cloudVendor: '', // 云服务商
        accountName: '', // 云账户
        clusterName: '' // 集群名称
      },
      timeType: '24hour', // 时间筛选
      queryLoading: false, // 请求loading
      totalInfo: {}, // 事件总数
      top10: [], // 事件数量Top10
      eventTrend: [], // 事件趋势
      sequential: {} // 事件环比
    }
  },
  created() {
    this.initPageData() // 初始化数据
  },
  methods: {
    /**
     *
     * @description: 时间类别切换
     * @param {*} val
     * @return {*}
     *
     */
    timeTypeChange(val) {
      this.getK8sEventData() // 请求数据
    },
    /**
     *
     * @description: 重置
     * @return {*}
     *
     */
    resetClick() {
      this.cloudClusterObj = {
        cloudVendor: '', // 云服务商
        accountName: '', // 云账户
        clusterName: '' // 集群名称
      }
      this.pageNum = 1 // 第一页
      this.getK8sEventData() // 请求数据
    },
    /**
     *
     * @description: 搜索
     * @return {*}
     *
     */
    queryClick() {
      if (
        !isEmptyString(this.cloudClusterObj.cloudVendor) &&
        isEmptyString(this.cloudClusterObj.clusterName) // 集群为空
      ) {
        this.$message.warning({
          message: '请选择集群',
          duration: 1500
        })
        return
      }
      this.queryLoading = true
      this.getK8sEventData() // 请求数据
    },
    /**
     *
     * @description: 查询
     * @return {*}
     *
     */
    getK8sEventData() {
      // 请求
      getK8sEvent({
        providerName: this.cloudClusterObj.cloudVendor, // 云商
        accountName: this.cloudClusterObj.accountName, // 云商账号
        clusterName: this.cloudClusterObj.clusterName, // 集群
        type: this.timeType // 时间类型
      })
        .then((res) => {
          this.totalInfo =
            res.data && res.data.totalInfo ? res.data.totalInfo : {} // 总数
          this.top10 =
            res.data && Array.isArray(res.data.top10) ? res.data.top10 : [] // top10
          this.eventTrend =
            res.data && Array.isArray(res.data.data) ? res.data.data : [] // 事件趋势
          this.sequential =
            res.data && res.data.sequential ? res.data.sequential : {} // 环比
        })
        .finally(() => {
          this.queryLoading = false
        })
    },
    /**
     *
     * @description: 初始化数据
     * @return {*}
     *
     */
    initPageData() {
      this.queryLoading = true
      this.getK8sEventData() // 请求数据
    }
  }
}
</script>

<style lang="less" scoped>
@import "@/assets/css/common.less";
.event-overview-container {
  .common-bg {
    background: #fdfdfd;
    border: 1px solid #ececec;
    padding: 10px 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    .subtitle {
      .textStyle(14px , 600, #262626);
      line-height: 26px;
    }

    .item {
      width: 100%;
      flex: 1;
    }
  }

  .overview-content {
    margin-top: 20px;
    height: calc(100vh - 242px);
    min-height: 630px;
    display: flex;
    flex-direction: column;

    .middle {
      flex: 52;
      display: flex;

      .left {
        flex: 54;
        height: 100%;
        margin-right: 20px;
      }

      .right {
        flex: 100;
        height: 100%;
        display: flex;
        flex-direction: column;

        .right-top {
          flex: 27;
          display: flex;

          .half {
            flex: 1;
            height: 100%;
            &:first-child {
              margin-right: 20px;
            }
          }
        }

        .right-bottom {
          margin-top: 20px;
          flex: 22;
        }
      }
    }

    .bottom {
      margin-top: 20px;
      flex: 25;
    }
  }
}
</style>
